<template>
  <div>
    <!-- 1.完整写法: v-on:监听的事件="methods中方法" -->
    <button v-on:click="btn1Click">监听按钮单击(完整写法)</button>
    <div class="area" v-on:mousemove="mouseMove">监听鼠标移动事件</div>
    <!-- 2.语法糖 -->
    <button @click="btn1Click">监听按钮单击(简写)</button>
    <!-- 3.绑定一个表达式: inline statement -->
    <button @click="counter++">单击+1： {{ counter }}</button>
    <!-- 4.绑定一个对象 -->
    <div class="area" v-on="{ click: btn1Click, mousemove: mouseMove }">监听鼠标移动事件</div>
  </div>
</template>

<!-- <script>
export default {
  name: 'vonbase',
  data() {
    return {
      counter: 100
    }
  },
  methods: {
    btn1Click() {
      console.log('按钮1发生了单击')
    },
    mouseMove() {
      console.log('鼠标移动')
    }
  }
}
</script> -->
<script setup>
defineOptions({
  name: 'vonbase'
})
import { ref } from 'vue'
const counter = ref(100)
const btn1Click = () => {
  console.log('按钮1发生了单击')
  counter.value++
}
const mouseMove = () => {
  console.log('鼠标移动')
}
</script>
<style lang="scss" scoped></style>
